<template>
	<view class="container">
		<!-- 银行卡列表 -->
		<view class="card-list" v-if="cards.length > 0">
			<!-- 加载中的骨架屏 -->
			<template v-if="loading">
				<view class="card-item" v-for="i in 2" :key="i">
					<view class="skeleton-card"></view>
				</view>
			</template>
			
			<view 
				class="card-item"
				v-for="(card, index) in cards"
				:key="index"
			>
				<view class="card-info">
					<view class="bank-name">{{ card.bankName }}</view>
					<view class="card-number">**** **** **** {{ card.lastFourDigits }}</view>
					<view class="card-type">{{ card.type }}</view>
				</view>
				<view class="card-actions">
					<text class="delete-btn" @click="handleDeleteCard(index)">删除</text>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view v-else class="empty-state">
			<image src="/static/images/empty-card.png" mode="aspectFit"></image>
			<text>暂无绑定银行卡</text>
		</view>
		
		<!-- 添加银行卡按钮 -->
		<button class="add-btn" @click="showAddCard = true">
			+ 添加银行卡
		</button>
		
		<!-- 添加银行卡弹窗 -->
		<view class="popup-mask" v-if="showAddCard" @click="showAddCard = false"></view>
		<view class="popup-content" v-if="showAddCard">
			<view class="popup-header">
				<text class="title">添加银行卡</text>
				<text class="close" @click="showAddCard = false">×</text>
			</view>
			<view class="form-content">
				<view class="form-item">
					<text class="label">持卡人</text>
					<input 
						type="text"
						v-model="formData.name"
						placeholder="请输入持卡人姓名"
					/>
				</view>
				<view class="form-item">
					<text class="label">卡号</text>
					<input 
						type="number"
						v-model="formData.cardNumber"
						placeholder="请输入银行卡号"
					/>
				</view>
				<view class="form-item">
					<text class="label">开户行</text>
					<picker 
						mode="selector"
						:range="bankList"
						range-key="name"
						@change="handleBankChange"
					>
						<view class="picker">
							{{ formData.bankName || '请选择开户行' }}
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">手机号</text>
					<input 
						type="number"
						v-model="formData.phone"
						placeholder="请输入预留手机号"
					/>
				</view>
			</view>
			<button 
				class="confirm-btn"
				:disabled="!canSubmit"
				:class="{ disabled: !canSubmit }"
				@click="handleAddCard"
			>
				确认添加
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const cards = ref([
	{
		bankName: '中国建设银行',
		lastFourDigits: '8888',
		type: '储蓄卡'
	}
])

const showAddCard = ref(false)
const formData = ref({
	name: '',
	cardNumber: '',
	bankName: '',
	phone: ''
})

const bankList = [
	{ name: '中国工商银行' },
	{ name: '中国建设银行' },
	{ name: '中国农业银行' },
	{ name: '中国银行' },
	{ name: '交通银行' }
]

const canSubmit = computed(() => {
	return formData.value.name && 
		formData.value.cardNumber && 
		formData.value.bankName && 
		formData.value.phone
})

const handleBankChange = (e) => {
	const index = e.detail.value
	formData.value.bankName = bankList[index].name
}

const handleAddCard = () => {
	if (!canSubmit.value) return
	
	// 添加新卡
	cards.value.push({
		bankName: formData.value.bankName,
		lastFourDigits: formData.value.cardNumber.slice(-4),
		type: '储蓄卡'
	})
	
	// 保存到本存储
	uni.setStorageSync('bankCards', JSON.stringify(cards.value))
	
	// 重置表单
	formData.value = {
		name: '',
		cardNumber: '',
		bankName: '',
		
		phone: ''
	}
	
	showAddCard.value = false
	
	uni.showToast({
		title: '添加成功',
		icon: 'success'
	})
}

const handleDeleteCard = (index) => {
	uni.showModal({
		title: '提示',
		content: '确定要删除这张银行卡吗？',
		success: (res) => {
			if (res.confirm) {
				cards.value.splice(index, 1)
				uni.setStorageSync('bankCards', JSON.stringify(cards.value))
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				})
			}
		}
	})
}

const loading = ref(true)

onMounted(() => {
	// 模拟加载延迟
	setTimeout(() => {
		const storageCards = uni.getStorageSync('bankCards')
		if (storageCards) {
			cards.value = JSON.parse(storageCards)
		}
		loading.value = false
	}, 1000)
})
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	background-color: #f5f7fa;
	min-height: 100vh;
}

.card-list {
	.card-item {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.card-info {
			.bank-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.card-number {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 10rpx;
			}
			
			.card-type {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.card-actions {
			margin-top: 20rpx;
			text-align: right;
			
			.delete-btn {
				color: #ff4d4f;
				font-size: 28rpx;
			}
		}
	}
}

.empty-state {
	text-align: center;
	padding: 100rpx 0;
	
	image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	
	text {
		font-size: 28rpx;
		color: #999;
	}
}

.add-btn {
	background-color: #4A90E2;
	color: #fff;
	border-radius: 45rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	margin-top: 40rpx;
}

.popup-mask {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 998;
}

.popup-content {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 30rpx;
	z-index: 999;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.title {
			font-size: 32rpx;
			font-weight: bold;
		}
		
		.close {
			font-size: 40rpx;
			color: #999;
		}
	}
	
	.form-content {
		.form-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;
			
			.label {
				width: 160rpx;
				font-size: 28rpx;
				color: #333;
			}
			
			input, .picker {
				flex: 1;
				font-size: 28rpx;
			}
			
			.picker {
				color: #666;
			}
		}
	}
	
	.confirm-btn {
		background-color: #4A90E2;
		color: #fff;
		border-radius: 45rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		margin-top: 40rpx;
		
		&.disabled {
			background-color: #ccc;
		}
	}
}
</style> 